<template>
  <view class="container">
    <view class="background-container">
      <image class="header-bg" src="@/static/headerBgi2.png" mode="widthFix">
      </image>
    </view>
    <view class="status-bar" v-if="!isApp"></view>
    <view class="navbar">
      <image class="navbarImg" @click="goBack" src="@/static/back.png" mode="aspectFill"></image>
      报名登记
    </view>
    <view class="content">
      <view class="tip">
        <image src="@/static/signupSuccessImg.png" :style="{marginBottom:'72rpx'}"></image>
        <view :style="{color:'#474b53',fontSize:'48rpx',marginBottom:'34rpx'}"> 岗位报名成功</view>
        <view :style="{color:'#b7bbbe',fontSize:'30rpx',marginBottom:'16rpx'}">您的报名信息已成功投递</view>
        <view :style="{color:'#b7bbbe',fontSize:'30rpx',marginBottom:'144rpx'}">单位将在近期审核匹配，请留意</view>
        <button
          :style="{color:'#ffffff',backgroundColor:'#3b7de8',fontSize:'34rpx',textAlign:'center',height:'88rpx',width:'480rpx'}"
          @click="goBack">返回首页</button>
      </view>

    </view>
  </view>
</template>

<script setup>
  const goBack = () => {
    uni.navigateTo({
      url: "/pages/work/index"
    })
  }
</script>

<style>
  .container {
    position: relative;
    width: 100%;
    padding-bottom: 100rpx;
  }

  .background-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 128rpx;
    overflow: hidden;
    z-index: -1;
  }

  .header-bg {
    width: 100%;
    height: 100%;
  }

  .status-bar {
    height: var(--status-bar-height);
  }

  .navbar {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 36rpx;
    text-align: center;
    height: calc(128rpx - var(--status-bar-height));
    position: relative;
  }

  .navbarImg {
    position: absolute;
    left: 21rpx;
    top: 50%;
    transform: translateY(-50%);
    width: 19rpx;
    height: 33rpx;
  }

  .content {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    height: calc(100vh - 128rpx);
  }

  .tip {
    height: auto;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .tip image {
    width: 172rpx;
    height: 175rpx;
  }
</style>